<template>
    <div class="system-role-container layout-padding">
        <div class="system-role-padding layout-padding-auto">
            <el-card shadow="hover" style="display: flex; flex-direction: column; flex: 1; height: inherit">
                <section style="flex: 1; height: inherit;overflow-y: auto;">
                    <el-form ref="ruleFormRef" :model="state.agentData" label-width="220px">
                        <section class="font16 px10 pl20 borderRadius5"
                            style="background:var(--el-color-primary-light-9);">
                            <p>总部邀请设置</p>
                        </section>
                        <el-form-item label="总部邀请类型设置">
                            <el-checkbox-group v-model="state.agentData.corpInviteType">
                                <el-checkbox v-for="agentLevel in state.agentLevelIdList" :key="agentLevel.agentLevelId"
                                    :label="agentLevel.agentLevelId" :value="agentLevel.agentLevelId">
                                    {{ agentLevel.agentName }}
                                </el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item class="mt10" label="总部邀请代理链接" prop="agentName">
                            <section>
                                <span>{{ state.agentData.corpInviteUrl }}</span>
                                <el-link class="font16 ml10" :underline="false"
                                    @click="copyText(state.agentData.corpInviteUrl)" type="primary">复制链接</el-link>
                            </section>
                        </el-form-item>
                        <el-form-item label="总部邀请代理二维码：" prop="agentPurchaseDiscount">
                            <el-image style="width: 120px; height: 120px" :src="state.agentData.corpInviteQr" />
                            <!-- <el-link class="font16 ml10" :underline="false" @click="saveImageToLocal(state.agentData.corpInviteQr)" type="primary">保存图片</el-link> -->

                        </el-form-item>
                        <section class="font16 px10 pl20 borderRadius5"
                            style="background:var(--el-color-primary-light-9);">
                            <p>代理邀请设置</p>
                        </section>
                        <el-form-item label="代理邀请类型设置：">
                            <el-radio-group v-model="state.agentData.agentInviteType">
                                <el-radio :label="1"> 代理自主邀请任意级别代理</el-radio>
                                <el-radio :label="2"> 仅可邀请平级或低级</el-radio>
                                <el-radio :label="3"> 仅可邀请低级代理 </el-radio>
                                <el-radio :label="4"> 默认全部类型，代理不可自主选择</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="代理邀请链接时长设置：">
                            <el-radio-group v-model="state.agentData.agentInviteUrlValidity">
                                <el-radio :label=0>发送后，3天有效</el-radio>
                                <el-radio :label=1>永久有效</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="邀请人文案显示：" prop="agentMinRecharge">
                            <el-switch v-model="state.agentData.agentInviteDescStatus" :active-value=1
                                :inactive-value=0 />
                        </el-form-item>
                    </el-form>
                </section>
                <section style="text-align: center; margin:10px 0;">
                    <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
                </section>
            </el-card>
        </div>
    </div>
</template>
<script setup lang="ts" name="funWangEditor">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage } from 'element-plus';
import { agentList, getAgentConfigInviteInfo, agentConfigInviteSave } from "/@/api/agent";

import type { FormInstance, FormRules } from 'element-plus'
import { useRoute } from 'vue-router';
import commonFunction from '/@/utils/commonFunction';
const route = useRoute();
const { copyText } = commonFunction();

// 定义变量内容
const ruleFormRef = ref<FormInstance>()
const state = reactive({
    agentLevelIdList: <any>[],
    agentData: {
        agentConfigId: '',//注册提示语句
        corpInviteType: [], //邀请类型   代理等级id列表
        corpInviteUrl: "", //邀请链接
        corpInviteQr: "",//图片二维码链接
        agentInviteUrlValidity: 0,//代理邀请链接有效期0 三天 1永久
        agentInviteDescStatus: 0,//是否显示邀请文案
        agentInviteType: 0//代理可邀请类型



    },
})

// 获取代理级别
const getAgentList = async () => {
    const { results } = await agentList();
    state.agentLevelIdList = results;
}

const getConfigInviteInfo = async () => {
    const { results } = await getAgentConfigInviteInfo()
    state.agentData = results
    console.log(results)
}
// 使用类型选择弹窗
const saveImageToLocal = (imageUrl: any) => {
    // 创建一个a标签
    const link = document.createElement('a');
    link.download = 'invited.jpg';
    // 设置href和download属性
    link.href = imageUrl;

    // // 触发点击
    // document.body.appendChild(link);
    link.click();

    // 清理
    link.remove();
    // document.body.removeChild(link);
}



// 页面加载时
onMounted(async () => {
    getAgentList()
    getConfigInviteInfo()

});

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate(async (valid, fields) => {
        if (valid) {
            let params = {
                agentConfigId: state.agentData.agentConfigId,
                corpInviteType: state.agentData.corpInviteType,
                agentInviteType: state.agentData.agentInviteType,
                agentInviteUrlValidity: state.agentData.agentInviteUrlValidity,
                agentInviteDescStatus: state.agentData.agentInviteDescStatus
            }
            const { results } = await agentConfigInviteSave(params);
            console.log(results)
            ElMessage.success('提交成功')
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>

<style lang="scss" scoped>
:deep(.el-card__body) {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: inherit;
}

.el-form {
    flex: 1;
    overflow-y: auto;
    position: relative;
}

.form-ele-size {
    width: 260px;
}

.line-title {
    font-size: 18px;
    padding: 8px 12px;
    background-color: #eceef0;
    border-radius: 6px;
    margin-bottom: 15px;
}

.selector-img {
    // width: 64px;
    // height: 64px;
    // border: 1px solid #ededed;
    // border-radius: 5px;
    // position: relative;
    // display: flex;
    // justify-content: center;
    // align-items: center;
    // &:hover {
    //     background-color: #f5f5f5;
    //     border: 1px solid #e4e3e3;
    // }
}

.typeBox {
    height: 65px;
    margin-right: 15px;
    border: 1px solid var(--el-border-color-light, #ebeef5);
    line-height: 24px;
    box-sizing: border-box;
    cursor: pointer;

    span:first-child {
        font-weight: 600;
    }

    span:last-child {
        font-weight: 500;
        color: var(--el-color-info-light-3);
    }
}

.typeBoxSelected {
    border: 1px solid var(--el-color-primary);
    position: relative;

    .virtual_san {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 0;
        height: 0;
        border-bottom: 26px solid var(--el-color-primary);
        border-left: 26px solid transparent;
    }

    .virtual_dui {
        position: absolute;
        bottom: -2px;
        right: 2px;
        color: #fff;
        font-family: system-ui;
    }
}

.selector-img {
    width: 64px;
    height: 64px;
    border: 1px solid #ededed;
    border-radius: 5px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
        background-color: #f5f5f5;
        border: 1px solid #e4e3e3;
    }
}
</style>
